<template>
  <!-- 轮播图组件 -->
  <div v-if="banners.length !== 0">
    <div
      class="banner-mark"
      :style="{ width: '100%', height: bannerMarkHeight + 'px' }"
    >
      <img
        :src="bannerMarkBgc"
        alt=""
        :style="{
          width: '100%',
          height: '100%',
        }"
      />
    </div>
    <div class="banner" ref="bannerDom">
      <div class="swiper-container">
        <swiper
          :autoplay="swiperOptions.autoplay"
          :pagination="swiperOptions.pagination"
          :navigation="swiperOptions.navigation"
          @init="slideInit"
          @slideChangeTransitionStart="slideChangeTransitionStart"
        >
          <swiper-slide v-for="item in banners" :key="item.targetId"
            ><img :src="item.imageUrl" alt="" style="width: 100%"
          /></swiper-slide>
        </swiper>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs, ref, watch } from "vue";

import SwiperCore, { Navigation, Pagination, Autoplay } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";

import "swiper/swiper.min.css"; // 整个轮播图的样式
import "swiper/components/pagination/pagination.min.css"; // 分页器的样式
import "swiper/components/navigation/navigation.min.css"; // 左右按钮的样式

SwiperCore.use([Navigation, Pagination, Autoplay]);

export default defineComponent({
  name: "Banner",
  components: {
    Swiper,
    SwiperSlide,
  },
  props: {
    // 轮播图数据
    banners: {
      type: Array,
      default: () => {
        return [];
      },
      require: true,
    },
  },
  setup(props) {
    let bannerDom = ref(null);
    // 数据
    let data = reactive({
      bannerMarkBgc: "", // 轮播图遮挡层的图片
      bannerMarkHeight: 0, // 轮播图遮挡层高度
      currentBannerIndex: 0, // 当前轮播图的索引     
      swiperOptions: {
        autoplay: {
          disableOnInteraction: false, // 鼠标滑动后继续自动播放
          delay: 5000, //5秒切换一次
        },
        navigation: {
          nextElRef: ".swiper-button-next",
          prevElRef: ".swiper-button-prev",
        },
        pagination: {
          clickable: true,
        },
        autoplayDisableOnInteraction: false, //用户操作swiper之后，是否禁止autoplay.默认为true：停止。
      },
    });

    watch(bannerDom, () => {
      if (bannerDom.value.offsetHeight < 400) {
        data.bannerMarkHeight = 500;
      } else {
        data.bannerMarkHeight = bannerDom.value.offsetHeight;
      }
    });

    // 轮播图改变的回调
    let slideChangeTransitionStart = (swiper) => {
      // 将改变的图片更新为背景图
      data.bannerMarkBgc = props.banners[swiper.activeIndex].imageUrl;
    };

    // 轮播图初始化的回调
    let slideInit = (swiper) => {
      data.bannerMarkHeight = bannerDom.value.offsetHeight;
      data.bannerMarkBgc = props.banners[swiper.activeIndex].imageUrl;
    };

    return {
      ...toRefs(data),
      slideChangeTransitionStart,
      slideInit,
      bannerDom,
    };
  },
});
</script>
<style scoped>
.banner {
  width: 100%;
  position: relative;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  width: 100%;
}

/* 修改分页器的样式 */
.swiper-container >>> .swiper-pagination-bullet-active {
  background: #c20c0c !important ;
}
.swiper-container >>> .swiper-button-prev,
.swiper-container >>> .swiper-button-next {
  color: #fff;
}
.banner-mark {
  position: absolute;
  top: 80px;
  left: 0;
  z-index: 0;
  filter: blur(13px);
}

.swiper-slide.swiper-slide-active:before {
  opacity: 0;
}
.swiper-container .swiper-pagination {
  bottom: 60px;
}

.swiper-pagination .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.6);
}
</style>
